<template>
  <div class="index">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="http://120.53.31.103:84/uploads/image/2021-09-08/lXEERcH4CIb3reka5yruT7RW7jMD4K7vreK6utgq.jpeg"
            alt
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://120.53.31.103:84/uploads/image/2021-09-08/zP1osWNNxyfKSX1Dt6IDUUh5Vpz8AxD39BBaQECW.jpeg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://120.53.31.103:84/uploads/image/2021-09-08/pihYvxiYLTL5XCVs0sMFzlvY2TfSUj95Tz0IWjgF.jpeg"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <ul>
        <li @click="$router.push('/course')">
          <img src="../../assets/images/index-kinds-course.png" alt />
          <p>特色课</p>
        </li>
        <li @click="$router.push('/oto')">
          <img src="../../assets/images/index-kinds-one.png" alt />
          <p>一对一辅导</p>
        </li>
        <li>
          <img src="../../assets/images/index-kinds-study.png" alt />
          <p>学习日历</p>
        </li>
      </ul>
    </div>
    <div class="list">
        <list v-for="(item,index) in list" :key="index" :itemObj="item"></list>
    </div>
  </div>
</template>
<script>
import {getList} from '../../request/home'
import {reactive,toRefs} from 'vue'
import list from '@/components/list'
export default {
    setup(props) {
        getList().then(res=>{
            console.log(res);
            data.list=res.data.data
        })
        const data=reactive({
            list:[]
        })
        return{...toRefs(data)}
    },
    components:{
        list
    }
}
</script>
<style lang="scss" scoped>
.index {
  background: #f2f3f5;
  width: 100%;
  height: calc(100% - 100px);
}
.banner {
  height: 225px;
  img {
    height: 225px;
    width: 100%;
  }
}
.nav {
  height: 148px;
  width: 100%;
  padding: 0 10px;
  position: relative;
  ul {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
    display: flex;
    height: 148px;
    display: flex;
    text-align: center;
    justify-content: space-between;
    padding: 0 25px;
    li {
      width: 23%;
      background: #fff;
      font-size: 12px;
      border-radius: 15px;
      padding-top: 50px;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
.list{
  padding: 0 10px;
}
</style>